<!--
 * @Author: 黄达全
 * @Date: 2024-07-19 15:35:54
 * @LastEditTime: 2024-07-19 23:35:41
-->
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import useElementPlus from "@/hooks/useElementPlus"
const {message} = useElementPlus()
interface loginForm {
    phone: string,
    yzm: string,
}

// 登录表单
const form: loginForm = reactive({
    phone: '',
    yzm: '',
})

// 表单规则
const rules = {
    username: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
    ],
    yzm: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
    ],
}

// 验证码发送后倒计时是否已经结束
const disabled = ref<boolean>(false)
// 验证码倒计时
const time = ref<number>(60)
// 获取验证码
const getQrCode = () => {

}

// 是否登录中
const islogin = ref<boolean>(false)
const login = () => {
    message({
        type:"warning",
        message:"成本原因-暂未接通验证码登录"
    })
}
</script>

<template>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="0" size="large" @keyup.enter="login">
        <el-form-item prop="phone">
            <el-input v-model="form.phone" prefix-icon="el-icon-iphone" clearable
                :placeholder="$t('login.mobilePlaceholder')">
                <template #prepend>+86</template>
            </el-input>
        </el-form-item>
        <el-form-item prop="qrCode" style="margin-bottom: 35px;">
            <div class="login-msg-yzm">
                <el-input v-model="form.yzm" prefix-icon="el-icon-unlock" clearable
                    :placeholder="$t('login.smsPlaceholder')"></el-input>
                <el-button @click="getQrCode" :disabled="disabled">{{ $t('login.smsGet') }}<span v-if="disabled">
                        ({{ time }})</span></el-button>
            </div>
        </el-form-item>
        <el-form-item>
            <el-button color="var(--primary-theme-color)" type="primary" style="width: 100%;" :loading="islogin" round @click="login">{{ $t('login.signIn')
                }}</el-button>
        </el-form-item>
        <!-- <div class="login-reg">
            {{ $t('login.noAccount') }} <router-link to="/user_register">{{ $t('login.createAccount') }}</router-link>
        </div> -->
    </el-form>
</template>

<style lang="scss" scoped>
:deep(.login-reg) {
    font-size: 14px;
    color: var(--el-text-color-primary);

    a {
        color: var(--el-color-primary);

        &:hover {
            color: var(--el-color-primary-light-3);
        }
    }
}

:deep(.login-msg-yzm) {
    display: flex;
    width: 100%;

    .el-button {
        margin-left: 10px;
        --el-button-size: 42px;
    }
}
</style>
